import React, { useState, useEffect } from 'react';
import { openNotification_util, fetchsync_util, dealnullorundenfined, convertISODateTimeToYYYYMMDDHHMMSS, useexcelauto, convertISODateTimeToYYYYMMDDHHMM } from '../util/util.js'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
import { Input, Select, Button, Spin, Modal } from 'antd';
import {
    LoadingOutlined, FileExcelOutlined
} from '@ant-design/icons';
import Custom_table_hooks_config from '../newmes/custom_table_hooks_config.js'

var storage = window.localStorage;
import Sortable_new from '../newmes/sortable_new.js';


const Analyse_kcfx_phmx_scb = (props) => {
    const [phmxList, setphmxlList] = useState([])
    const [selectedRows, setselectedRows] = useState([])
    const [selectedRowKeys, setselectedRowKeys] = useState([])
    const [initSize, setinitSize] = useState() //table宽度大小
    const [isloading, setisloading] = useState(true)
    const [columnarr, setcolumnarr] = useState([
        { show: true, title: "类型", key: "lx"},
        { show: true, title: "原单类型", key: "ydlx"},

        { show: true, title: "制单人", key: "create_by" },
        { show: true, title: "单据时间", key: "create_time",width:"8rem" },

        { show: true, title: "物料名称", key: "wlmc",width:"10rem" ,style: {color:"#1d35e7" }},
        { show: true, title: "物料编码", key: "wlbm",width:"10rem",style: {color:"#1d35e7" } },
        { show: true, title: "规格型号", key: "ggxh" },
        { show: true, title: "数量", key: "sl"},
        { show: true, title: "批号", key: "ph"},
        { show: true, title: "版本号", key: "bbh"},
        { show: true, title: "仓库", key: "ck"},
    ])


    const querylist = async () => {
        setisloading(true)
        let url= props.sfbbh || props.sfck ? "/admin/qbmes/queryjskc_analyse_tj" : "/admin/qbmes/queryjskc_analyse"
        let rtdata = await fetchsync_util(url, 'POST', { selectedRows: props.selectedRows, sfbbh: props.sfbbh,sfck:props.sfck}, "json")
        openNotification_util(rtdata.rtmessage)
        rtdata.resultdata.forEach(item=>{
            item.create_time=moment(item.create_time).format("YYYY-MM-DD HH:mm:ss")
        })
        setphmxlList(dealnullorundenfined(rtdata.resultdata))
        setselectedRowKeys([])
        setselectedRows([])
        setisloading(false)

    }

    const handleExprot = async () => {
        let filtercol = JSON.parse(JSON.stringify(columnarr)).filter(item => item.show == true)
        //console.log("filtercol,",filtercol)

            var calselectrow=selectedRows.map(item=>{
                item.jbkcl=item.jbkcl*1
                item.fdwkcl=item.fdwkcl*1
                item.jc=item.jc*1
                return item
            });
            
        
        useexcelauto(calselectrow, filtercol.map(item=>{delete item.width;return item}), '即时库存分析_明细')
    }


    useEffect(() => {
        if (props.ifshow && props.selectedRows.length > 0) {
            querylist()
            if (storage['Pc_analyse_kcfx_phmx']) {
                var result = JSON.parse(storage['Pc_analyse_kcfx_phmx'])
                setcolumnarr(result)
            }
            else { setcolumnarr(columnarr) }
        }
        else;
    }, [props.selectedRows, props.ifshow])



    useEffect(() => {
        if (storage['Pc_analyse_kcfx_phmx']) {
            var result = JSON.parse(storage['Pc_analyse_kcfx_phmx'])
            //result 中style的值以columnarr为主
            for (var i = 0; i < result.length; i++) {
                if (result[i].style) {
                    //找到columnarr对应style
                    var styledataIndex = columnarr.findIndex(item => item.key == result[i].key)
                    if (styledataIndex != -1) {
                        result[i].style = columnarr[styledataIndex].style
                    }
                }
            }
            setcolumnarr(result)
        }
        else {
            setcolumnarr(columnarr)
        }
        // props.djh?querylist(props.djh):''
        storage['analyse_kcfx_phmx_initsize'] ? setinitSize(storage['analyse_kcfx_phmx_initsize']) : setinitSize(1)
    }, [])

    const handleselectfather = (selectedRows, selectedRowKeys) => {
        //console.log(selectedRows)
        setselectedRows(selectedRows)
        setselectedRowKeys(selectedRowKeys)
    }


    return (
        <div style={styles.maincontainer}>

            <div style={styles.linestyleflex}>

                <Button style={{
                    backgroundColor: "white", color: "#2b55b6", fontWeight: "800", margin: "0.5%",
                    height: "1.7rem"
                }}
                    onClick={handleExprot}><FileExcelOutlined />导 出</Button>

               {/* <Button style={{ width: "6rem", height: "1.5rem", margin: "0.5%", borderColor: "transparent", boxShadow: "0 transparent" }}>
                    合计卷数：{selectedRows.length}</Button>

                <Button style={{ width: "8rem", height: "1.5rem", margin: "0.5%", borderColor: "transparent", boxShadow: "0 transparent" }}>
                    总重量：{selectedRows.length > 0 ? selectedRows.reduce((ddq, item) => ddq * 1 + item.jbkcl * 1, 0).toFixed(2) : 0}</Button>

                <Button style={{ width: "8rem", height: "1.5rem", margin: "0.5%", borderColor: "transparent", boxShadow: "0 transparent" }}>
                    总面积：{selectedRows.length > 0 ? selectedRows.reduce((ddq, item) => ddq * 1 + item.fdwkcl * 1, 0).toFixed(2) : 0}</Button> */}
                    
            </div>


            <Sortable_new tableColnum={columnarr} handleTableColomn={(data) => { setcolumnarr(data); }}
                storageName="Pc_analyse_kcfx_phmx" style={{ position: 'absolute', right: '2vw', top: '0', fontSize: "1.5rem" }}
                initSize={initSize} handleInitSize={(data) => { setinitSize(data); storage['analyse_kcfx_phmx_initsize'] = data; }}
            />
            {/* <Button style={{ backgroundColor: "white", color: "#2b55b6", fontWeight: "800" }}
                         onClick={handleExprot}><FileExcelOutlined />导 出</Button> */}


            {isloading ?
                (<div style={{ width: "10%", height: "10%", position: "absolute", left: "50%", top: "49%", color: "#14d9cc" }}>
                    <Spin /></div>)
                :
                (<div style={{ width: "100%", right: "0", left: "0", marginTop: "0.1rem", overflowX: "scroll", padding: "1rem" }}>
                    <Custom_table_hooks_config tabledata={phmxList} tablecolnum={columnarr}
                        sfdoubleclick="false" ifhiddencchangeselecttype="true"
                        width={`${initSize * 96}vw`}
                        calcolor={(text) => {
                            return text == "入库" ? '#13d601' :
                              text == "出库" ? '#a91f24' : 'black'
                          }}
                        scroll={{ y:'calc(100vh - 280px)', x: 50 }}

            
                          rowClassName={(record, index) => {
                            var rtclassname=""
                            if (record.sfsk ==='是') 
                              { rtclassname= 'my-table-pink-row';}
            
                            if (record.kw =='') 
                              { rtclassname= 'my-table-yellow-row';}
            
                            
                            return rtclassname
                          }  }

                        selectedRows={selectedRows} selectedRowKeys={selectedRowKeys}
                        handleselectson={(selectedRows, selectedRowKeys) => { handleselectfather(selectedRows, selectedRowKeys) }}
                    />
                </div>)
            }




        </div>
    )
}


export default Analyse_kcfx_phmx_scb


var styles = {
    maincontainer: {
        minHeight: "80vh", backgroundColor: `white`,
        backgroundSize: "100% 100%", width: "100%", position: "absolute", left: "0", color: "white", fontSize: "0.8rem", overflowX: "hidden"
    },

    linestyleflex: {
        height: "1.1rem", fontSize: "0.6rem", position: "relative", width: "96vw", marginLeft: "0.2%", textIndent: "1rem",
        display: "flex", justifyContent: "flex-start", alignItems: "center"
    },
}
